<template>
 <div class="kui-content-wrap">
    <div class="kui-wrap-desk kui-flex kui-flex-between kui-flex-middle">
      <Breadcrumb class="kui-desk-nav">
        <BreadcrumbItem to="/">我的工作台</BreadcrumbItem>
        <BreadcrumbItem>客户管理</BreadcrumbItem>
      </Breadcrumb>
      <div class="kui-desk-act">
        <Button class="kui-act-btn" type="primary" style="margin-left:5px;" size="small" @click="$router.push({path:'/customer/add'})">新增客户</Button>
      </div>
    </div>
    <div class="kui-wrap-body">
      <div class="kui-body-section">
        <div class="kui-section-item">
          <div class="kui-item-bd kui-table-panel">
            <div class="kui-table-sc">
              <Form class="kui-form-panel" ref="searchForm" inline :v-model="searchVal">
                <FormItem>
                  <Input v-model="searchVal.name" clearable placeholder="请输入客户名"/>
                </FormItem>
                <FormItem>
                  <Input v-model="searchVal.no" clearable placeholder="请输入客户编号"/>
                </FormItem>
                <FormItem>
                  <Input v-model="searchVal.linkman" clearable placeholder="请输入联系人"/>
                </FormItem>
                <FormItem>
                  <Input v-model="searchVal.phone" clearable placeholder="请输入联系电话"/>
                </FormItem>
                <FormItem>
                  <Button @click="searchFun" icon="ios-search">搜索</Button>
                </FormItem>
                <FormItem>
                  <Button @click="searchReset">重置</Button>
                </FormItem>
              </Form>
            </div>
            <div class="kui-table-hd kui-flex kui-flex-between kui-flex-middle">
              <Button class="kui-hd-btn" type="error" size="small" @click="allDelete">删除所选数据</Button>
              <span>共{{ total }}条数据</span>
            </div>
            <Table class="kui-table-bd"
                   ref="selection"
                   border
                   :columns="tabTitle"
                   :data="tabData"
                   @on-selection-change="clickSelect"></Table>
            <div class="kui-table-ft" v-if="total">
              <Page class="kui-page-current"
                    :total="total"
                    :page-size="20"
                    size="small"
                    @on-change="clickPages">
              </Page>
            </div>
          </div>
        </div>
      </div>
    </div>
 </div>
</template>

<script>
export default {
  data() {
    return {
      tabTitle: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: 'id',
          key: 'id',
          width: 100,
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '客户名',
          width: 180,
          key: 'name',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '客户编号',
          width: 140,
          key: 'no',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '联系人',
          width: 180,
          key: 'linkman',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '联系电话',
          key: 'phone',
          width: 140,
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '手机号码',
          key: 'mobile',
          width: 140,
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '地址',
          key: 'address',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '录入者',
          width: 140,
          key: 'author',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '创建时间',
          width: 180,
          key: 'created_at',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '用户等级',
          key: 'level',
          width: 120,
          align: 'center',
          render: (h, params) => {
            if( params.row.level === 0 ) {
              return h('Tag', '潜在客户')
            }else if( params.row.level === 1 ) {
               return h('Tag', '普通客户')
            }else if( params.row.level === 2 ) {
               return h('Tag', '优质客户')
            }
          }
        },
        {
          title: '状态',
          width: 120,
          key: 'state',
          align: 'center',
          render: (h, params) => {
            if( params.row.state === 1 ) {
              return h('Tag', '正常')
            }else if( params.row.state === -1 ) {
               return h('Tag', '黑名单')
            }
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          fixed: 'right',
          align: 'center',
          render: (h, parent) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '8px'
                  },
                  on: {
                    click: () => {
                      this.jumpBtn(parent.row.id)
                    }
                  }
                },
                '查看'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    marginRight: '8px'
                  },
                  on: {
                    click: () => {
                      this.ejectBtn(parent.row)
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.clickDelete(parent.row.id)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      tabData: [],
      total: null,
      selectedArr: [],
      temporaryData: {}, //修改数据临时存放
      searchVal: {},  //搜索临时存放
      state: false
    }
  },
  methods: {
    //获取数据
    async getData(page) {
      const app = this
      let { data } = await app.$axios.get(`/master/v1/customer?page=${page}`)
      if (data.code === 100) {
        app.tabData = data.result.data
        app.total = data.result.total
      }
    },
    //搜索数据
    async searchData(page) {
      const app = this
        let { data } = await app.$axios.get('/master/v1/customer', {
          params: {
            page,
            ...app.searchVal
          }
        })
        if (data.code === 100) {
          app.tabData = data.result.data
          app.total = data.result.total
        } else {
          app.$Message.error(data.msg)
        }
    },
    // 清除搜索
    searchReset() {
      this.state = false
      this.searchVal = {}
      this.getData(1)
    },
    //修改数据
    async putData(id) {
      const app = this
      let { data } = await app.$axios.put(`/master/v1/customer/${id}`, app.temporaryData)
      if(data.code === 100){
        this.getData(1)
        app.$Message.success(data.msg)
      }else{
        app.$Message.error(data.msg)
      }
    },
    //删除数据
    async deleteData(ids) {
      const app = this
      let { data } = await app.$axios.delete('/master/v1/des/customer', {
        data: { ids }
      })
      if (data.code === 100) {
        app.selectedArr = []
        app.getData(1)
        app.$Message.success(data.msg)
      }else{
        app.$Message.error(data.msg)
      }
    },
    //删除弹窗
    clickDelete (id) {
      const app = this
      let ids = [ id ]
      app.$Modal.confirm({
        title: '确认删除',
        content: '你正在删除，是否继续？',
        onOk: () => {
          this.deleteData(ids)
        }
      })
    },
    //获取选中数据
    clickSelect(row) {
      this.selectedArr = row.map(item => {
        return item.id
      })
    },
    //删除选中数据操作
    allDelete() {
      const app = this
      if (app.selectedArr.length !== 0) {
        app.$Modal.confirm({
          title: '确认删除',
          content: '你正在批量删除，是否继续？',
          onOk: () => {
            this.deleteData(this.selectedArr)
          }
        })
      } else {
        app.$Message.error('请选择操作对象！')
      }
    },
    //翻页操作
    clickPages(page) {
      this.state ? this.searchData(page) : this.getData(page)
    },
    //修改数据弹出框
    ejectBtn(list) {
      const app = this
      app.temporaryData = {
        no: list.no,
        name: list.name,
        linkman: list.linkman,
        phone: list.phone,
        mobile: list.mobile,
        address: list.address,
        state: list.state,
        level: list.level,
       }
      app.$Modal.confirm({
        title: '修改客户资料',
        render: h => (
          'div',
          {
            attrs: {
              class: 'bomb-box',
              style: 'padding-top: 24px;'
            }
          },
          [
            h(
              'Form',
              {
                props: {
                  model: app.temporaryData,
                  labelWidth: 100,
                  labelPosition: 'left'
                },attrs: {
                  style: 'padding-top: 24px;'
                }
              },
              [
                h('FormItem', {
                  props: {
                    label: '客户编号'
                  }
                }, [
                  h('Input', {
                    props: {
                      value: app.temporaryData.no
                    },
                    on: {
                      input: val => {
                        app.temporaryData.no = String(val)
                      }
                    }
                  })
                ]),
                h('FormItem', {
                  props: {
                    label: '客户名字'
                  }
                }, [
                h('Input', {
                      props: {
                        value: app.temporaryData.name
                      },
                      on: {
                        input: val => {
                          app.temporaryData.name = String(val)
                        }
                      }
                    })
                  ]
                ),
                h('FormItem', {
                  props: {
                    label: '联系人名字'
                  }
                }, [
                h('Input', {
                      props: {
                        value: app.temporaryData.linkman
                      },
                      on: {
                        input: val => {
                          app.temporaryData.linkman = String(val)
                        }
                      }
                    })
                  ]
                ),
                h('FormItem', {
                  props: {
                    label: '联系电话'
                  }
                }, [
                  h('Input', {
                    props: {
                      value: app.temporaryData.phone
                    },
                    on: {
                      input: val => {
                        app.temporaryData.phone = String(val)
                      }
                    }
                  })
                ]),
                h('FormItem', {
                  props: {
                    label: '手机号码'
                  }
                }, [
                  h('Input', {
                    props: {
                      value: app.temporaryData.mobile
                    },
                    on: {
                      input: val => {
                        app.temporaryData.mobile = String(val)
                      }
                    }
                  })
                ]),
                h('FormItem',{
                  props: {
                    label: '地址'
                  }
                },[
                  h('Input',{
                    props: {
                      value: app.temporaryData.address
                    },
                    on: {
                      input: val => {
                        app.temporaryData.address = String(val)
                      }
                    }
                  })
                ]),
                h('FormItem', {
                  props: {
                    label: '等级标识'
                  }
                }, [
                  h('Select', {
                    props: {
                      model: app.temporaryData.level,
                      value: 0
                    },
                    on: {
                      'on-change': val => {
                        app.temporaryData.level = Number(val)
                      }
                    }
                  },[h('Option',{
                          props: {
                              value: 0
                          }
                      },'潜在客户'),
                      h('Option',{
                          props: {
                              value: 1
                          }
                      },'普通客户'),
                      h('Option',{
                          props: {
                              value: 2
                          }
                      },'优质客户')
                  ])
                ]),
                h('FormItem', {
                  props: {
                    label: '状态'
                  }
                }, [
                  h('Select', {
                    props: {
                      model: app.temporaryData.state,
                      value: 1
                    },
                    on: {
                      'on-change': val => {
                        app.temporaryData.state = Number(val)
                      }
                    }
                  },[
                      h('Option',{
                          props: {
                              value: 1
                          }
                      },'正常'),
                      h('Option',{
                          props: {
                              value: -1
                          }
                      },'黑名单')
                  ])
                ])
              ]
            )
          ]
        ),
        okText: '保存',
        loading: true,
        onOk: () => {
          app.putData(list.id)
          this.$Modal.remove()
        }
      })
    },
    // 路由跳转
    jumpBtn(id) {
      this.$router.push({
          path:'/customer/info',
          query: {
            id: id
          }
        })
    },
    //搜索操作
    searchFun() {
      this.searchData(1)
      this.state = true
    }
  },
  created() {
    this.getData(1)
  }
}
</script>

<style lang="less" scoped></style>
